<template>
  <div>
    <el-card style="min-width: 1200px">
      <el-row>
        <el-col :span="6">
          <el-input
            v-model="commandForm.memberName"
            style="width: 100%"
            placeholder="请输入商户名称/商户ID"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button
            type="primary"
            class="width120"
            @click="
              () => {
                this.dataForm = JSON.parse(JSON.stringify(this.commandForm));
                this.getDataList();
              }
            "
            >查询</el-button
          >
        </el-col>
        <el-col :span="3" :offset="11">
          <el-button
            @click="addChild()"
            type="primary"
            style="width: 100%; min-width: 120px"
            >创建子商户</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 15px; min-width: 1200px">
      <div class="switch">
        <el-switch v-model="isFixedTableH" inactive-text="固定表头">
        </el-switch>
        <!-- <el-switch
          v-model="showDeleteChild"
          style="margin-left: 80px"
          inactive-text="显示已删除子商户"
          @change="queryFn()"
        >
        </el-switch> -->
      </div>
      <el-table :height="fixedTableHeight" :data="dataList">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
          width="160px"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          show-overflow-tooltip
          prop="memberType"
          align="center"
          label="商户类型"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.memberType ? memberTypeObj[scope.row.memberType] : "-"
              }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="memberName"
          align="center"
          label="商户名称"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.memberName ? scope.row.memberName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="memberNo"
          align="center"
          label="企业用户ID"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.memberNo ? scope.row.memberNo : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="memberNo"
          align="center"
          label="AppID"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.memberNo ? scope.row.memberNo : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="memberLevel"
          align="center"
          label="所属层级"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <el-tag
                :type="
                  scope.row.memberLevel == '1'
                    ? 'danger'
                    : scope.row.memberLevel == '2'
                    ? 'warning'
                    : scope.row.memberLevel == '3'
                    ? 'success'
                    : ''
                "
                >{{
                  scope.row.memberLevel ? scope.row.memberLevel + "级商户" : "-"
                }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="incomeAmountTotal"
          sortable
          align="center"
          label="可用余额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.fmtAvailableAmount
                  ? scope.row.fmtAvailableAmount
                  : "0.00"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="incomeAmountTotal"
          sortable
          align="center"
          label="可提现余额/元"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.fmtCashAmount ? scope.row.fmtCashAmount : "0.00" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope" v-if="!scope.row.deleted">
            <el-button @click="handleEdit(scope.row)" type="text"
              >详情</el-button
            >
            <el-button
              @click="addChild(scope.row)"
              type="text"
              v-if="scope.row.memberLevel < 7"
              >添加下级</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
  </div>
</template>

<script>
import mixins from "@/mixins/mixin";
import { getUserInfo } from "@/utils/public";
import base64 from "@/utils/code";

export default {
  name: "childManagement",
  mixins: [mixins],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/api/merchant/memberbase/searchByPage",
        deleteURL: "/api/merchant/memberbase/delete",
        createdIsNeed: false,
      },
      showDeleteChild: false, // 显示删除的子商户
      dataList: [],
      commandForm: {
        memberName: "",
        deleted: 0,
        appId: this.$store.state.appId || "",
        memberClass: 2,
      },
      memberTypeObj: {
        1: "政府机构",
        2: "国营企业",
        3: "私营企业",
        4: "外资企业",
        5: "个体工商户",
        6: "事业单位",
      },
    };
  },
  created() {
    this.dataForm = JSON.parse(JSON.stringify(this.commandForm));
    this.getDataList();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.getDataList();
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    queryFn() {
      if (this.showDeleteChild) {
        this.commandForm.deleted = 1;
      } else {
        this.commandForm.deleted = 0;
      }
      this.getDataList();
    },
    addChild(row) {
      //   this.$store.commit('changeCheckedMenuItem', {
      //   index: '1-3',
      // })
      if (row) {
        this.$router.push({
          path: "/merchant/createChild",
          query: { row: base64.encode(JSON.stringify(row)) },
        });
      } else {
        this.$router.push({
          path: "/merchant/createChild",
        });
      }
    },
    handleEdit(row) {
      this.$router.push({
        path: "/merchant/childMerchantInfo",
        query: { id: row.id },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.switch {
  margin-bottom: 20px;
}
</style>
